<template>
	<div class="wrap">
		<div class="content">
			<textarea class="areatext" name="" id="" v-model="content" maxlength="500"></textarea>
			<span class="sub">{{content.length}}/500</span>
		</div>
		<div class="submit-btn" @click="feedbackAdd">提交</div>
		<div class="tank" v-if="visible">
			<div class="tank-content">
				<img class="success" src="@/static/suceess.png" alt="">
				<div class="success-text">提交成功</div>
				<div class="ok" @click="ok">知道了</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '../../utils/request'

	export default {
		components:{
		},
		data() {
			return {
				visible:false,
				content:'',
			}
		},
		onLoad(option) {
		},
		methods: {
			ok(){
				this.visible = false
				uni.switchTab({
					url: '/pages/me/index'
				});
			},
			async feedbackAdd(){
				await request('api/personal/feedbackAdd', 'post', {content:this.content});
				this.visible = true
				// uni.showToast({
				// 	title: '反馈成功',
				// 	icon: 'success',
				// 	mask: true
				// })
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tank {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba($color: #09101D, $alpha: 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		.tank-content {
			width: 265px;
			height: 375px;
			padding: 40px;
			background: #FFFFFF;
			border-radius: 30px 30px 30px 30px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.success {
				width: 190px;
				height: 185px;
				display: block;
			}
			.success-text {
				font-size: 24px;
				color: #000000;
				margin-top: 32px;
			}
			.ok {
				width: 172px;
				height: 40px;
				background: linear-gradient( 270deg, rgba(222,55,63,0.9) 0%, rgba(255,105,105,0.9) 100%);
				border-radius: 100px 100px 100px 100px;
				border: 2px solid #000000;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 40px;
			}
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		.sub {
			position: absolute;
			bottom: 40px;
			right: 20px;
		}
		
		.areatext {
			width: 305px;
			height: 260px;
			padding: 20px;
			background: #FFF9F9;
			border-radius: 20px 20px 20px 20px;
			border: 2px solid #000000;
			margin:30px auto;
		}
	}

	.submit-btn {
		width: 300px;
		height: 40px;
		background: linear-gradient( 270deg, rgba(222,55,63,0.9) 0%, rgba(255,105,105,0.9) 100%);
		border-radius: 100px 100px 100px 100px;
		border: 2px solid #000000;
		margin: 100px auto 0;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		color: #fff;
	}

</style>
